<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>添加电影</title>
  <style>
    h1{
        text-align: center;
    }
   .list {
      margin: auto 100px;
    }

   .list .item {
      margin-top: 20px;
    }

   .list .item span {
      width: 80px;
      flex-shrink: 0;
    }
  </style>
</head>

<body>
  <header>
    <h1>添加电影</h1>
  </header>
  <div class="list">
    <div class="item">
      <span>电影名称：</span>
      <input type="text" id="film-name" class="form-control" placeholder="请输入电影名称">
    </div>
    <div class="item">
      <span>电影海报：</span>
      <input type="text" id="url" class="form-control" placeholder="请输入海报地址">
    </div>
    <div class="item">
      <span>上映地区：</span>
      <input type="text" id="addr" class="form-control" placeholder="请输入上映地区">
    </div>
    <div class="item">
      <span>电影评分：</span>
      <input type="text" id="score" class="form-control" placeholder="请输入电影评分">
    </div>
    <div class="item">
      <span>播放时长：</span>
      <input type="text" id="film-time" class="form-control" placeholder="请输入播放时长">
    </div>
    <div class="item">
      <span>电影主演：</span>
      <input type="text" id="starring" class="form-control" placeholder="请输入主演">
    </div>
    <div class="item">
      <span>电影效果：</span>
      <select id="select" class="form-control">
        <option value="">请选择效果</option>
        <option value="2D">2D</option>
        <option value="3D">3D</option>
      </select>
    </div>
    <!-- 添加提交按钮 -->
    <div class="item">
      <button id="cancel" class="btn-secondary active">取消</button>
      <button id="submit" class="btn-primary">提交</button>
    </div>
  </div>

  <script src="../js/axios.js"></script>
  <script>
    var baseUrl = 'http://localhost:3009';
    const cancel = document.querySelector('#cancel');
    cancel.addEventListener('click',()=>{
        history.back();
    })
    // 获取提交按钮元素
    const submitButton = document.getElementById('submit');

    // 为提交按钮添加点击事件监听器
    submitButton.addEventListener('click', async () => {
      try {
        // 获取输入框和选择框的值
        const filmName = document.getElementById('film-name').value;
        const url = document.getElementById('url').value;
        const addr = document.getElementById('addr').value;
        const score = document.getElementById('score').value;
        const filmTime = document.getElementById('film-time').value;
        const starring = document.getElementById('starring').value;
        const select = document.getElementById('select').value;

        // 构建要发送的数据对象
        const data = {
          filmName,
          url,
          addr,
          score,
          filmTime,
          starring,
          select
        };

        // 发起 Axios POST 请求
        await axios.post(baseUrl + '/film/add', data);

        // 提示添加成功
        alert('添加成功');
        history.back();
      } catch (error) {
        // 处理请求错误
        console.error('请求出错:', error);
        alert('添加失败，请稍后重试');
      }
    });
  </script>
</body>

</html>